<template>
	<view class="page">
		<view class="top">
			<view class="left">
				<view class="text">我的金豆</view>
				<view class="currency">{{userInfo.points}}</view>
			</view>
		</view>
		<view class="main">
			<view class="title">选择充值金额</view>
			<view class="list">
				<view v-for="(todo, index) in list" :key="todo.coin" class="item"
					:class="{active: selectIndex == index}" @click="selectIndex = index">
					<view class="count">{{ todo.coin }}</view>
					<view class="price">{{ todo.pay }}元</view>
				</view>
				<view class="item custom" @click="show = true">自定义</view>
			</view>
			<view class="title">选择充值金额</view>
			<view class="payBox">微信支付</view>
		</view>
		<view class="footer">
			<!-- <view class="text">充值即代表同意<text class="color">《用户充值协议》</text></view> -->
			<view class="btn" @click="addTopUp(false)">立即充值</view>
		</view>

		<u-popup :show="show" :bgColor="false" mode="center" closeable bgColor="transparent"
			:safeAreaInsetBottom="false" :safeAreaInsetTop="false" :closeable="false" @close="show = false">
			<view class="perspective">
				<view class="title">自定义金额</view>
				<view class="content">
					<input v-model="payValue" type="number" />
					<view class="coin">{{ (payValue || 0)* 100 }}</view>
				</view>
				<view class="btn" @click="addTopUp(true)">立即充值</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				show: false,
				payValue: 0,
				selectIndex: 0,
				list: [{
						coin: 100,
						pay: 1
					}, {
						coin: 500,
						pay: 5
					},
					{
						coin: 1000,
						pay: 10
					},
					{
						coin: 3000,
						pay: 30
					},
					{
						coin: 5000,
						pay: 50
					},
				]
			}
		},
		onLoad() {
			this.getUserInfo();
		},
		methods: {
			async getUserInfo() {
				let res = await this.$http("api/user/getUserInfo", {}, "GET")
				// console.log(res);
				if (res.code == 200) {
					uni.setStorageSync("user", res.result);
					this.userInfo = res.result
				}
			},
			// 创建积分充值订单
			addTopUp(isCustom) {
				this.$http("api/order/createPointOrder", {
					amount: isCustom ? this.payValue : this.list[this.selectIndex].pay //true	int		充值金额
				}).then(res1 => {
					console.log(111, res1);
					if (res1.code == 200) {
						this.$http("api/order/payPointOrder", {
							order_sn: res1.result.order_sn, //true	string		订单号
							// #ifdef MP-WEIXIN
							pay_type: 1, //true	string		支付类型 1微信 2抖音
							// #endif
							// #ifdef MP-TOUTIAO
							pay_type: 2, //true	string		支付类型 1微信 2抖音
							// #endif
						}).then(res => {
							console.log(222, res);
							if (res.code == 200) {
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: res.result.timeStamp,
									nonceStr: res.result.nonceStr,
									package: res.result.package,
									signType: res.result.signType,
									paySign: res.result.paySign,
									success: (res) => {
										this.getUserInfo()
										uni.showToast({
											title: '支付成功',
											icon: 'none',
											duration: 2000
										})
									},
									fail: function(err) {
										console.error(err);
										uni.showToast({
											title: '支付失败',
											icon: 'none',
											duration: 2000
										})
									}
								});
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		box-sizing: border-box;
		padding: 0 0 0;
		background: #FAFAFA;
		min-height: 100%;
	}

	.top {
		background: #FF920B;
		box-sizing: border-box;
		padding: 158rpx 0 0 32rpx;
		height: 454rpx;
		width: 100%;

		.left {
			position: relative;
			height: 100%;

			.text {
				color: #999;
				font-size: 32rpx;
				line-height: 44rpx;
				margin-bottom: 16rpx;
			}

			.currency {
				color: #333333;
				font-size: 112rpx;
				display: flex;
				align-items: center;
				height: 136rpx;
				position: relative;
				z-index: 2;
			}

			.currency:before {
				content: "";
				display: block;
				width: 64rpx;
				height: 64rpx;
				background: url(https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/changyue/currency.png);
				background-size: 100% 100%;
				margin-right: 8rpx;
				position: relative;
				top: -20rpx;
			}
		}

		.left:after {
			content: "";
			display: block;
			width: 374rpx;
			height: 334rpx;
			background: url(https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/changyue/topUpBack.png);
			background-size: 100% 100%;
			position: absolute;
			right: 0;
			bottom: 8rpx;
			z-index: 1;
		}
	}

	.main {
		width: 100%;
		background: #fff;
		border-radius: 48rpx 48rpx 0 0;
		padding: 32rpx 32rpx 0;
		margin-top: -42rpx;
		box-sizing: border-box;

		.title {
			color: #333333;
			font-size: 32rpx;
			margin-bottom: 16rpx;
			font-weight: bold;
		}

		.list {
			display: flex;
			flex-wrap: wrap;
			margin: 32rpx 0 48rpx;

			.item {
				width: 212rpx;
				height: 130rpx;
				border: 2rpx solid #E3E3E3;
				border-radius: 16rpx;
				box-sizing: border-box;
				padding-top: 16rpx;
				text-align: center;
				position: relative;
				margin: 0 0 24rpx 26rpx;

				.count {
					height: 64rpx;
					align-items: center;
					color: #333333;
					font-size: 52rpx;
					display: flex;
					justify-content: center;
					font-weight: bold;
				}

				.count:before {
					content: "";
					display: block;
					align-items: center;
					width: 28rpx;
					height: 28rpx;
					background: url(https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/changyue/currency.png);
					background-size: 100% 100%;
					margin-right: 8rpx;
				}

				.price {
					font-size: 24rpx;
					color: #999;
					line-height: 34rpx;
				}
			}

			.custom {
				display: flex;
				line-height: 130rpx;
				color: #333;
				font-size: 28rpx;
				justify-content: center;
				padding: 0;
			}

			.item:nth-of-type(3n-2) {
				margin-left: 0;
			}

			.item:nth-of-type(1):before {
				content: "推荐";
				width: 80rpx;
				height: 44rpx;
				border-radius: 8rpx;
				background: #FE4202;
				text-align: center;
				line-height: 44rpx;
				display: block;
				font-size: 20rpx;
				position: absolute;
				color: #fff;
				left: 0;
				top: -22rpx;
			}

			.active {
				border-color: #FFB929;
			}

			.active:after {
				content: "";
				width: 48rpx;
				height: 48rpx;
				display: block;
				background: url(https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/changyue/topupSelect.png);
				background-size: 100% 100%;
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}

		.payBox {
			width: 196rpx;
			height: 92rpx;
			background: rgba(36, 219, 90, 0.1);
			border: 2rpx solid #24DB5A;
			border-radius: 8rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
		}

		.payBox:before {
			content: "";
			width: 44rpx;
			height: 44rpx;
			display: block;
			background: url(https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/changyue/wx.png);
			background-size: 100% 100%;
			margin-right: 8rpx;
		}
	}

	.footer {
		padding: 0 32rpx;
		position: fixed;
		bottom: 100rpx;
		left: 0;

		.text {
			color: #999999;
			font-size: 24rpx;
			line-height: 34rpx;
			margin-bottom: 16rpx;

			.color {
				color: #FFB929;
			}
		}

		.btn {
			width: 686rpx;
			height: 88rpx;
			background: #FFB929;
			line-height: 88rpx;
			text-align: center;
			color: #fff;
			font-size: 32rpx;
			border-radius: 44rpx;
			font-weight: bold;
		}
	}

	.perspective {
		width: 566rpx;
		background: #fff;
		padding: 0 44rpx 32rpx;
		box-sizing: border-box;
		border-radius: 32rpx;

		.title {
			font-size: 28rpx;
			color: #333;
			line-height: 40rpx;
			text-align: center;
			padding: 32rpx 0 24rpx;
		}

		.content {
			margin-bottom: 16rpx;

			input {
				width: 478rpx;
				height: 60rpx;
				color: #333;
				font-size: 32rpx;
				border-radius: 8rpx;
				border: 1rpx solid #333333;
				box-sizing: border-box;
				padding: 0 20rpx;
			}

			.coin {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				color: #333;
				font-size: 24rpx;
				margin-top: 16rpx;
			}

			.coin:before {
				content: "";
				display: block;
				width: 28rpx;
				height: 28rpx;
				background: url(https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/changyue/currency.png);
				background-size: 100% 100%;
			}
		}

		.btn {
			width: 192rpx;
			height: 66rpx;
			background: #FFB929;
			text-align: center;
			border-radius: 16rpx;
			font-size: 24rpx;
			color: #fff;
			line-height: 66rpx;
			margin: 0 auto;
		}
	}
</style>